<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo">
        <h2 v-if="ok">表白成功</h2>
        <h3 v-else>表白失败</h3>

        <hr>

        <h2 v-show="ok">求婚成功</h2>
        <h3 v-show="!ok">求婚失败</h3>

        <button @click="ok=!ok">切换</button>
        <!-- 
            v-if/v-else和v-show都能实现标签结构的显示与隐藏
            只是实现的方式不同
                -v-if/v-else隐藏时是将标签删除，显示时在重新创建一个标签
                -v-show是通过样式来实现显示与隐藏的   display：none
                -如果需要频繁的切换就使用v-show
                -v-show占用的内存更大，但是执行的效率更高

         -->
    </div>
    <script src="../day02/js/vue.js"></script>
    <script>
        new Vue({
            data() {
                return {
                    ok: true,
                }
            },
            /* methods: {
                toggle() {
                    this.ok = !this.ok
                }
            } */
        }).$mount("#demo")
    </script>
</body>

</html>